<template>
  <el-card style="width: 100%">
    <template #header>
      <div class="flex-between">
        <span>退号</span>
      </div>
    </template>

    <!-- 查询病历号 -->
    <el-form :model="form" inline class="mb-4">
      <el-form-item label="病历号">
        <el-input v-model="form.casenumber" placeholder="请输入病历号" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 患者基本信息展示 -->
    <el-form v-if="record" :model="record" label-width="120px" class="mt-4">
      <el-form-item label="姓名">
        <el-input v-model="record.realname" disabled />
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input v-model="record.idnumber" disabled />
      </el-form-item>
      <el-form-item label="性别">
        <el-input :value="record.gender === 1 ? '男' : '女'" disabled />
      </el-form-item>
      <el-form-item label="家庭住址">
        <el-input v-model="record.homeaddress" disabled />
      </el-form-item>
    </el-form>

    <!-- 挂号信息列表 -->
    <el-table
        v-if="record"
        :data="[record]"
        stripe
        border
        style="width: 100%; margin-top: 16px"
    >
      <el-table-column prop="casenumber" label="病历号" width="120" />
      <el-table-column prop="registTime" label="挂号日期" width="180" />
      <el-table-column prop="registName" label="挂号号别" />
      <el-table-column prop="deptName" label="科室" />
      <el-table-column prop="status" label="看诊状态" />
      <el-table-column label="操作" width="120">
        <template #default="{ row }">
          <el-button
              type="danger"
              size="small"
              :disabled="row.status !== '未看诊'"
              @click="onCancel"
          >
            退号
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 退号后发票信息 & 打印 -->
    <div v-if="invoice" class="mt-4">
      <p><strong>应退金额：</strong>{{ invoice.money }} 元</p>
      <el-button type="primary" @click="onPrint">打印冲红退号票据</el-button>
    </div>
  </el-card>
</template>

<script setup>
import { reactive, ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

// 搜索表单
const form = reactive({ casenumber: '' })
// 查询到的挂号记录
const record = ref(null)
// 退号完成后返回的发票信息
const invoice = ref(null)

// 点击“查询”
async function onSearch() {
  if (!form.casenumber) {
    return ElMessage.warning('请先输入病历号')
  }
  try {
    const { data } = await axios.get('/api/master/register/query', {
      params: { casenumber: form.casenumber }
    })
    record.value = data
    invoice.value = null
  } catch (e) {
    record.value = null
    ElMessage.error('查询失败：' + (e.response?.data?.message || '未找到记录'))
  }
}

// 点击“退号”
async function onCancel() {
  if (!record.value) return
  if (record.value.status !== '未看诊') {
    return ElMessage.error('只有“未看诊”状态的挂号记录才可以退号')
  }
  try {
    const { data } = await axios.post('/api/master/register/cancel', {
      registId: record.value.id
    })
    invoice.value = data
    ElMessage.success('退号成功，应退金额：' + data.money + ' 元')
  } catch (e) {
    ElMessage.error('退号失败：' + (e.response?.data?.message || ''))
  }
}

// 打印冲红退号票据
function onPrint() {
  if (!invoice.value) return
  const tpl = `
    <div style="padding:20px;font-family:sans-serif;">
      <h2>退号冲红发票</h2>
      <p><strong>病历号：</strong>${record.value.casenumber}</p>
      <p><strong>发票号：</strong>${invoice.value.invoicenum || '—'}</p>
      <p><strong>金额：</strong>${invoice.value.money} 元</p>
      <p><strong>操作人：</strong>${invoice.value.userid}</p>
      <p><strong>时间：</strong>${new Date(invoice.value.creationtime).toLocaleString()}</p>
      <hr/>
      <p>—— 感谢光临 ——</p>
    </div>`
  const w = window.open('', '_blank')
  w.document.write(tpl)
  w.document.close()
  w.focus()
  w.print()
}
</script>

<style scoped>
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mb-4 {
  margin-bottom: 16px;
}
.mt-4 {
  margin-top: 16px;
}
</style>
